<template>
  <fieldset>
    <legend>产品</legend>
    <span v-for="item in products" :key="item.id" style="font: 12px/30px ''">
      {{ item.title }}------库存:{{ item.inventory }}-----单价:
      {{ item.price }}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button
        :disabled="item.inventory <= 0"
        @click="add_cart(item)"
        style="
          font-size: 25px;
          text-align: center;
          vertical-align: top;
          border: 0;
          background: white;
        "
      >
        +
        <span style="color: gray; font: 12px/30px ''; vertical-align: text-top">
          加入购物车
        </span>
      </button>
      <br />
    </span>
  </fieldset>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";

export default {
  computed: {
    ...mapState(["products"]),
  },
  mounted() {
    // this.$store.dispatch("GET_PRODUCT");
    // console.log(this.products);
    // console.log(this.$store);
  },
  methods: {
    ...mapActions(["cart/ADD_PRODUCT"]),
    ...mapMutations("product", ["DECREMENT_INVENTORY"]),
    ...mapMutations("cart", ["SET_CART"]),
    add_cart(item) {
      //   console.log(this);
      //   this.$store.dispatch("cart/ADD_PRODUCT", item);
      this["cart/ADD_PRODUCT"](item);
      this.DECREMENT_INVENTORY(item);
      this.SET_CART(item);
    },
  },
};
</script>
